<template>
  <!-- <div class="home">
    <v-chart class="chart" :option="option" />
  </div> -->
  <div>
    <!--页面主体部分-->
    <section class="mainbox">
      <div class="column">
        <div class="panelNav">
          <div class="panelNav-foot"></div>

          <month-picker @time="getTime" @month="getMonth" @year="getYear"/>

          <router-link to="/jj1" class="rou" tag="li"
                       v-bind:style="{ background: activeColor1 }"
                       @click.native="reverseColor1"><i class="iconfont icon icon-gongyede-"></i> 地区生产总值</router-link>
          <router-link to="/jj2" class="rou" tag="li"
                       v-bind:style="{ background: activeColor2 }"
                       @click.native="reverseColor2"><i class="iconfont icon icon-zhangwaizichanchuzhi-88"></i> 分区镇一般公共预算收入</router-link>
          <router-link to="/jj3" class="rou" tag="li"
                       v-bind:style="{ background: activeColor3 }"
                       @click.native="reverseColor3"><i class="iconfont icon icon-shouru"></i> 一般公共预算收入</router-link>
          <router-link to="/jj4" class="rou" tag="li"
                       v-bind:style="{ background: activeColor4 }"
                       @click.native="reverseColor4"><i class="iconfont icon icon-touzi"></i> 全社会固定资产投资</router-link>
          <router-link to="/jj5" class="rou" tag="li"
                       v-bind:style="{ background: activeColor5 }"
                       @click.native="reverseColor5"><i class="iconfont icon icon-touzi1"></i> 工业投资</router-link>
          <router-link to="/jj6" class="rou" tag="li"
                       v-bind:style="{ background: activeColor6 }"
                       @click.native="reverseColor6"><i class="iconfont icon icon-qian"></i> 规上工业总产值</router-link>
          <router-link to="/jj7" class="rou" tag="li"
                       v-bind:style="{ background: activeColor7 }"
                       @click.native="reverseColor7"><i class="iconfont icon icon-chukoutuishui_chukoufapiaopikai"></i> 社会消费品零售总额</router-link>
          <router-link to="/jj8" class="rou" tag="li"
                       v-bind:style="{ background: activeColor8 }"
                       @click.native="reverseColor8"><i class="iconfont icon icon-suoshuxiangzhen"></i> 进出口总额</router-link>
          <router-link to="/jj9" class="rou" tag="li"
                       v-bind:style="{ background: activeColor9 }"
                       @click.native="reverseColor9"><i class="iconfont icon icon-chukoutuishui_chukoupeixun"></i> 出口总额</router-link>
          <router-link to="/jj10" class="rou" tag="li"
                       v-bind:style="{ background: activeColor10 }"
                       @click.native="reverseColor10"><i class="iconfont icon icon-lingshou"></i> 实际使用外资</router-link>
        </div>
      </div>
      <router-view/>
    </section>
  </div>


</template>


<script>
import '../../assets/v-icon/iconfont.css';
export default {
  name: 'HomeView',
  mounted() {
    this.$parent.reverseColor1();
  },
  methods: {
    //获取时间
    getTime(time) {
      this.selectedTime = time;
    },
    getMonth(month) {
      this.selectedMonth = month;
      // console.log(this.selectedMonth)
    },
    getYear(year) {
      this.selectedYear = year;
      // console.log(this.selectedYear)
    },
    reverseColor1: function () {
          this.activeColor1 = 'rgba(19, 58, 150)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor2: function () {
          this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(19, 58, 150)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor3: function () {
          this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(19, 58, 150)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor4: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(19, 58, 150)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor5: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(19, 58, 150)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor6: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(19, 58, 150)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor7: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(19, 58, 150)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor8: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(19, 58, 150)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor9: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(19, 58, 150)',
          this.activeColor10 = 'rgba(7, 22, 64)'
    },
    reverseColor10: function () {
      this.activeColor1 = 'rgba(7, 22, 64)',
          this.activeColor2 = 'rgba(7, 22, 64)',
          this.activeColor3 = 'rgba(7, 22, 64)',
          this.activeColor4 = 'rgba(7, 22, 64)',
          this.activeColor5 = 'rgba(7, 22, 64)',
          this.activeColor6 = 'rgba(7, 22, 64)',
          this.activeColor7 = 'rgba(7, 22, 64)',
          this.activeColor8 = 'rgba(7, 22, 64)',
          this.activeColor9 = 'rgba(7, 22, 64)',
          this.activeColor10 = 'rgba(19, 58, 150)'
    },
  },
  data() {
    return {
      selectedTime: new Date(),
      selectedYear: 0,
      selectedMonth: 0,
      activeColor1: 'rgba(19, 58, 150)',
      activeColor2: 'rgba(7, 22, 64)',
      activeColor3: 'rgba(7, 22, 64)',
      activeColor4: 'rgba(7, 22, 64)',
      activeColor5: 'rgba(7, 22, 64)',
      activeColor6: 'rgba(7, 22, 64)',
      activeColor7: 'rgba(7, 22, 64)',
      activeColor8: 'rgba(7, 22, 64)',
      activeColor9: 'rgba(7, 22, 64)',
      activeColor10: 'rgba(7, 22, 64)',
    }
  },
}
</script>